<template>
	<view class="content">
		   <!-- navbar部分 -->
				<u-navbar
					@leftClick="backHome"
					:autoBack="false"
					:bgColor="'rgba(15, 23, 79,1)'"
					:leftIconColor="'rgba(255,255,255,1)'"
					leftText="趋势图"
					style="margin-bottom: 128rpx;"
					>
				</u-navbar>
				<!-- 内容区域 -->
				<view class="Select">
					<!-- 下拉框 -->
						<uni-data-select
							v-model="value"
							:localdata="range"
							@change="change"
							class="SelectBox"
						>
						</uni-data-select>
						<uni-data-select
							v-model="value1"
							:localdata="range1"
							@change="change1"
							class="SelectBox1"
						>
						</uni-data-select>
						 <!-- 搜索按钮 -->
						<button class="topBtn" @click="search">
						 	<uni-icons type="search" size="20" color="#fbfbfc" style="margin-right: 2rpx;"></uni-icons>
						</button>
				</view>
				<view class="echarts">
					<echarts  v-if="TrendchartXData.length>0" :option="option" style="height:100%;width: 100%;"></echarts>
					<text v-else>暂无数据</text>
				</view>
			
	</view>
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue';
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import {gasParameter,GasTrendchart} from '@/api/Trendchart/Trendchart.js'
	import cookie from '../../../cookie.js'
	
	export default {
		data() {
			return {
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//选择机器人
				value:cookie.get('robotid'),
				text:cookie.get('robot_name'),
				range:[
						{value:"", text:""}
				],
				//被选中机器人的id
				robot_config_id:cookie.get('robotid'),
				//被选中的机器人
				ranges:{},
				
				//气体参数
				value1:cookie.get('id'),
				text1:cookie.get('param_name'),
				range1: [
				 { value: "", text: "" }
				],
				//被选中的气体
				ranges1:{},
				//保存气体名
				param_name:cookie.get('param_name'),
				//echarts图表
				option: {},
				//保存趋势图数据
				TrendchartXData:[],
				TrendchartYData:[]
			};
		},
		components: {
			echarts
		},
		onLoad() {
			this.robotList() //机器人信息
			this.TrendChart() //气体参数
		},
		mounted() {
			this.logstatrt(); //echarts图
		},
		methods:{
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.scsj = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
			    // 下拉刷新时重新加载数据
			   this.robotList() //机器人信息
			   this.TrendChart() //气体参数
			
			    // 在1秒后停止下拉刷新
			    setTimeout(() => {
			      uni.stopPullDownRefresh();
			    }, 500);
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
					  this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			//获取气体参数
			TrendChart(){
				gasParameter(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
						this.range1 = Response.rows.map(({ id, param_name }) => ({ value: id, text: param_name }))
					})
				})
			},
			backHome(){
				uni.reLaunch({
					url:'/pages/index'
				})
			},
			change(e) {
				//保存选中机器人的id
				this.ranges = this.range.find(item => item.value === e)
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
				this.robot_config_id = this.ranges.value
				this.TrendChart() //echarts图
			},
			change1(e) {
				this.ranges1 = this.range1.find(item => item.value === e)
				cookie.set('param_name',this.ranges1.text)
				cookie.set('id',this.ranges1.value)
				this.param_name = this.ranges1.text
				this.option.legend.data = [this.ranges1.text]; // 更新legend的data
			},
			//气体趋势图
			qtqst(){
				GasTrendchart(this.token,this.secretKey,this.param_name,this.robot_config_id).then(Response=>{
					this.TrendchartXData = Response.data.xData
					this.TrendchartYData = Response.data.yData
				})
			},
			search(){
				this.robot_config_id = this.value
				this.qtqst() //气体对应的趋势图数据
				this.logstatrt() //更新echarts
			},
			logstatrt() {
				this.option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#50B0E6'
							}
						}
					},
					legend: {
						data:[this.param_name],
						orient:'vertical',
						right:'15',
						textStyle:{
						      fontSize:12,
						      color:'#666666'
						},
					},
					grid: {
						left: '8%',
						right: '5%',
						bottom: '8%',
						// containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							 axisLine: {
								lineStyle: {
									width: 0.1
								},
							},
							axisTick:{
								show:false
							},
							data: this.TrendchartXData,
							axisLabel:{
							  fontSize:'12',
							  color:'#666666',
							  fontFamily:'Source Han Sans CN',
							  fontWeight:'400'
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							name: '单位 :',
							nameTextStyle:{
								fontSize:'12'
							},
							axisLabel:{
							  fontSize:'12',
							  color:'#666666',
							  fontFamily:'Source Han Sans CN',
							  fontWeight:'400'
							}
						}
					],
					series: [
						{
							name: this.param_name,
							type: 'line',
							// stack: 'Total',
							symbol: 'circle',
							symbolSize:6.5,
							smooth:true,
							itemStyle: {
										//面积图里的颜色和圆点里的颜色
										color: "#1DC5F5",
										//圆点外的颜色
										borderColor: "#fff",
										//圆点的宽度
										borderWidth: 1.5,
										//圆点影子的颜色
										shadowColor: 'rgba(38,139,196,0.69)',
								},
							//设置面积区域为渐变效果
							areaStyle: {
							 type: 'default',
							 color:'#CFDEF9'
							},	
							emphasis: {
								focus: 'series'
							},
							lineStyle:{
								normal:{
									width:4,
									color:'#50B0E6'
								}
							},
							data: this.TrendchartYData,
						},
					]
				};
			}
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	
	page{
			background-color: #f5f5f5;
	}
	
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
		margin-top: 60rpx;
	}
	.Select{
		width: 710rpx;
		height: 65rpx;
		// margin-top: 128rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chartreuse;
	}
	.SelectBox /deep/ .uni-icons{
		font-size: 0px !important;
	}
	.SelectBox1{
		width: 176rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-left: 16rpx;
	}
	.SelectBox1 /deep/ .uni-icons{
		font-size: 0px !important;
	}
	
	.SelectBox{
		width: 176rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
	
	.topBtn{
		width: 98rpx;
		height: 54rpx;
		background: #0F174F;
		border-radius: 27rpx;
		margin-left: 25rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.echarts{
		width: 710rpx;
		height: 628rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		margin-top: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
